import React from 'react'
import Navigation from './Navigation'
import { Layout, Menu, Breadcrumb,Avatar,Dropdown,Select,BackTop  } from 'antd';
import User from './routes/User';
import Culture from './routes/Culture';
import Interest from './routes/Interest';
import Enviro from './routes/Enviro';
import Food from './routes/Food';
import Hotel from './routes/Hotel';
import Post from './routes/Post';
import System from './routes/System';
import {DownOutlined} from '@ant-design/icons';
import './css/major.css'
import {useSelector,useDispatch,connect} from 'react-redux'
const { SubMenu } = Menu;
const { Header, Content, Footer} = Layout;







const Major = ({prop}) => {
  const status = useSelector(state => state.login.sta);
  const isLogin = useSelector(state => state.login.islogin);
  const dispatch = useDispatch();

  let guess;
  if(prop === 'user'){
    guess = <User />
  }else if(prop === 'culture'){
    guess = <Culture />
  }else if(prop === 'interest'){
    guess = <Interest />
  }else if(prop === 'enviro'){
    guess = <Enviro />
  }else if(prop === 'food'){
    guess = <Food />
  }else if(prop === 'hotel'){
    guess = <Hotel />
  }else {
    guess = <System />
  }

  const exit = () => {
    dispatch({type:'exit'})
  }
  const menu = (
    <Menu>
    <Menu.Item danger onClick={exit}>退出</Menu.Item>
  </Menu>
  );

    return (
    <Layout>
    <Header className="header">
      <div className="logo" />
      <h2 className="titleName">i行亦知后台管理系统</h2>
      <div className="admin">
        <div>
        <Avatar src={status.adminImg} className="admin-pic"/>
        </div>
        
        <Dropdown overlay={menu} className="admin-info">
          <a className="ant-dropdown-link" onClick={e => e.preventDefault()}>
          {status.username} <DownOutlined />
          </a>
  </Dropdown>
      </div>
      
    </Header>

    <Content style={{ padding: '0 50px' }}>
      <Breadcrumb style={{ margin: '15px 0' }}>
      </Breadcrumb>
      <Layout className="site-layout-background" style={{ padding: '20px 0' }}>   
        <Navigation />  
        {guess}
        
      </Layout>
    </Content>
      {/* 底部，主要是一些备案信息 */}
    <Footer style={{ textAlign: 'center' }}>@2021 逆局小组所有</Footer>
    <BackTop visibilityHeight={150}/>
  </Layout>
    )
}

export default connect()(Major)